<template>
  <label class="rx-radio" @click="updateValue" :class="{
      'is-checked':value===cvalue,
      'is-disabled':disabled
      }">
    <span class="rx-radio__input">
      <span class="rx-radio__inner"></span>
    </span>
    <!-- <rx-icon name="rx-radio"/>
    <rx-icon name="rx-radio-checked"/> -->
    <span class="rx-radio__label">
      <slot></slot>{{label}}
    </span>
  </label>
</template>
<script>
export default {
  name: "rx-radio",
  props: {
    value: "",
    cvalue: "",
    label: "",
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    updateValue() {
      if (this.disabled) {
        return;
      }
      if (this.value !== this.cvalue) {
        this.$emit("change", this.cvalue);
      }
      this.$emit("input", this.cvalue);
    }
  },
  created() {
    console.log(this.value === this.cvalue);
  }
};
</script>
<style lang="scss">
.rx-radio {
  cursor: pointer;
  display: inline-block;
  user-select: none;

  .rx-icon-rx-radio-checked{
    display: none;
  }

  &.is-checked {
    .rx-radio__inner {
      border-color: #3673ff;
      &::after {
        background-color: #3673ff;
      }
    }
     .rx-icon-rx-radio-checked{
       display: inline;
     }
     .rx-icon-rx-radio{
       display: none;
     }
  }

  &.is-disabled {
    cursor: default;

    .rx-radio__input {
      border-color: #c4cad7;
      background-color: #ebebeb;
    }

    .rx-radio__label {
      color: #ccc;
    }

    &.is-checked {
      .rx-radio__inner {
        background-color: #c2ccdc;

        &::after {
          background-color: #fff;
        }
      }
    }
  }
}
.rx-radio__input {
  display: inline-block;
  line-height: 1;
  position: relative;
}
.rx-radio__inner {
  position: relative;
  border: 1px solid #c4cad7;
  border-radius: 100%;
  width: 1em;
  height: 1em;
  background: #fff;
  box-sizing: border-box;
  display: inline-block;
  transition: all .3s;
  &:hover {
    border: 1px solid #3673ff;
  }
  &::after{
    content: "";
        width: 0.42em;
        height: 0.42em;
        border-radius: 100%;
        background-color: transparent;
        position: absolute;
        left: 50%;
        top: 50%;
        // transform: translate(-50%, -50%);
        transform: translate(-50%, -50%) scale(1);
        transition: all .3s;
  }
}
.rx-radio__label {
  display: inline-block;
}
</style>
